<template>
	<view class="submit">
		<text class="skip" @click="skip">
			跳过
		</text>
		<view class="title">
			填写基本信息
		</view>
		<view class="avatar">
			<u-avatar :src="form.avatar" mode="circle" size="large" @click="upload"></u-avatar>
			<br>
			<text>
				上传头像
			</text>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label="昵称">
					<u-input v-model="form.name" />
				</u-form-item>
				<u-form-item label="性别">
					<u-input v-model="form.sex" type="select" :border="false" @click="show.sex = true" />
					<u-action-sheet :list="select.sexs" v-model="show.sex" @click="actionSheetCallback">
					</u-action-sheet>
				</u-form-item>
				<u-form-item :border-bottom="false">
					<text>
						个性签名
					</text>

				</u-form-item>
				<u-form-item>
					<u-input v-model="form.text" />
				</u-form-item>

				<u-form-item label="生日">
					<!-- <u-input v-model="form.date" :border="false" @click="show.date = true">
						
					</u-input> -->
					<picker mode="date" :value="form.date" start="1970-01-01" @change="bindDateChange">
						<view class="picker">{{form.date}}</view>
					</picker>

				</u-form-item>

			</u-form>
		</view>
		<view class="button">
			<u-button @click="toHome">欢迎使用</u-button>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {

				form: {
					avatar: '',
					name: "",
					sex: "",
					text: "",
					date: currentDate
				},
				show: {
					sex: false,
					date: false
				},
				select: {
					sexs: [{
							text: '男'
						},
						{
							text: '女'
						}
					]
				}

			};
		},
		created() {

		},
		onShow() {
			let token = uni.getStorageSync("token")
			if (token === "") {
				uni.redirectTo({
					url: "../login/login"
				})
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			skip() {
				console.log("跳过")
				uni.switchTab({
					url: "../home/home"
				})
			},
			upload() {
				uni.chooseImage({
					count: 1,
					success: res => {
						this.form.avatar = res.tempFilePaths[0]
					}
				})
			},
			actionSheetCallback(index) {
				this.form.sex = this.select.sexs[index].text;
			},
			bindDateChange(e) {
				this.form.date = e.detail.value
			},
			toHome() {
				let token = uni.getStorageSync("token")
				uni.uploadFile({
					url: 'http://127.0.0.1:8000/submit/', //仅为示例，非真实的接口地址
					header: {
						"Authorization": "JWT " + token
					},
					filePath: this.form.avatar,
					name: 'avatar',
					formData: {
						'date': this.form.date,
						'name': this.form.name,
						'text': this.form.text,
						'sex': this.form.sex
					},
					success: (res) => {
						let data = res.data
						data = JSON.parse(data)

						if (data.code == 1) {
							uni.showModal({
								content: "提交成功",
								showCancel: false,
								success() {
									uni.navigateTo({
										url: '/pages/home/home',
									});
								}
							})
							
						} else {
							uni.showModal({
								content: data.errors,
								showCancel: false
							});

						}
					},
					fail: (err) => {
						uni.showModal({
							content: "服务器异常",
							showCancel: false
						});
					}
				});

			}
		}
	}
</script>

<style lang="scss">
	.submit {
		.skip {
			margin-left: 650rpx;
			font-size: 30rpx;
			// background-color: black;
			color: #C0C4CC;
		}

		.title {
			// text-align: center;
			margin: 15px 40rpx;
		}

		.avatar {
			text-align: center;
			margin: 30px 0;
		}

		.form {
			padding: 0 30rpx;
		}

		.button {
			width: 650rpx;
			margin: 30px auto;
		}
	}
</style>
